<!doctype html>
<html>
<head>
<meta charset="utf-8">
<TITLE>论坛--帖子列表</TITLE>

<Link rel="stylesheet" type="text/css" href="style/style.css" />
	<style>
		/*[v-cloak]是一个样式规则    */
		[v-cloak]{
			display:none;
		}
	</style>
</HEAD>

<div id="app">
	<DIV>
		<IMG src="image/logo.gif">
	</DIV>
	<!--      用户信息、登录、注册        -->

	<DIV class="h" v-if="islogin==false" v-cloak>
		您尚未　<a href="login.html">登录</a>
		&nbsp;| &nbsp; <A href="reg.html">注册</A> |
	</DIV>
	<div class="h" v-else >
		<span>欢迎您:{{uname}} </span> | <a href="" @click.prevent="logout">安全退出</a>|<a href="login.html"  >切换用户</a>
	</div>

	<!--      主体        -->
	<DIV>
	<!--      导航        -->
	<br/>
	<DIV>
		&gt;&gt;<B><a href="index.html">论坛首页</a></B>&gt;&gt;
		<B><a href="list.html">{{boardname}}</a></B>
	</DIV>
	<br/>
	<!--      新帖        -->
		<DIV>
			<A href="post.html"><IMG src="image/post.gif" name="td_post" border="0" id=td_post></A>
		</DIV>
	<!--     翻 页         -->
		<DIV>
			总数据{{pagebean.total}}  ,共{{pagebean.totalpages}}页，
			当前第{{pagebean.pageno}}页,每页{{pagebean.pagesize}}条 |
			<a href="list.html" @click.prevent="showTopicBoard(1)">第一页</a>|
			<a href="list.html" @click.prevent="showTopicBoard(pagebean.pre)">上一页</a>|
			<a href="list.html" @click.prevent="showTopicBoard(pagebean.next)">下一页</a>|
			<a href="list.html" @click.prevent="showTopicBoard(pagebean.totalpages)">最后一页</a>
		</DIV>

		<DIV class="t">
			<TABLE cellSpacing="0" cellPadding="0" width="100%">
				<TR>
					<TH class="h" style="WIDTH: 100%" colSpan="4"><SPAN>&nbsp;</SPAN></TH>
				</TR>
	<!--       表 头           -->
				<TR class="tr2">
					<TD>&nbsp;</TD>
					<TD style="WIDTH: 80%" align="center">文章</TD>
					<TD style="WIDTH: 10%" align="center">作者</TD>
					<TD style="WIDTH: 10%" align="center">回复</TD>
				</TR>
	<!--         主 题 列 表        -->

				<TR class="tr3" v-for="(item,index) in topicBoard">
					<TD><IMG src="image/topic.gif" border=0></TD>
					<TD style="FONT-SIZE: 15px">
						<A href="" @click.prevent="showReplyDetail(item.topicid,item.title)">{{item.title}}</A>
					</TD>
					<TD align="center">{{item.uname}}</TD>
					<TD align="center">{{item.total}}</TD>
				</TR>
			</TABLE>
		</DIV>
	<!--            翻 页          -->
		<DIV>
			总数据{{pagebean.total}} ,共{{pagebean.totalpages}}页，
			当前第{{pagebean.pageno}}页, 每页{{pagebean.pagesize}}条 |
			<a href="list.html" @click.prevent="showTopicBoard(1)">第一页</a>|
			<a href="list.html" @click.prevent="showTopicBoard(pagebean.pre)">上一页</a>|
			<a href="list.html" @click.prevent="showTopicBoard(pagebean.next)">下一页</a>|
			<a href="list.html" @click.prevent="showTopicBoard(pagebean.totalpages)">最后一页</a>|
		</DIV>
	</DIV>
	<!--             声 明          -->
	<BR/>
	<CENTER class="gray">源辰信息</CENTER>
</div>
</BODY>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script>
	var vm=new Vue({
		el:"#app",
		data:{
			uname:"a",
			islogin:false,
			boardname:"",
			boardid:"",
			topicBoard:[],
			pagebean:{
				pageno:1,
				pagesize:4,
				total:0,
				totalpages:0,
				pre:1,
				next:2,
			},
		},
		methods:{
			checkLogin:function(){
				return axios.get("tbl_user.action?op=checkLogin");
			},
			logout:function(){
				axios.post("tbl_user.action?op=logout").then(data=>{
					var result = data.data;
					if(result.code==1){
						this.uname="";
						this.upass="";
						this.islogin=false;
					}
				})  ;
			},

			showTopicBoard:function(pageno ){
				this.pagebean.pageno=pageno;
				var params=new URLSearchParams(this.pagebean);
				params.append("op","showTopicBoard");
				params.append("boardid",this.boardid);
				axios.post("topic.action",params).then(result=>{
					let jsonmodel2=result.data;
						if(jsonmodel2.code==1){
							jsonmodel2.data.dataset.forEach((item,index)=>{
								item.status=false;  //给每个菜品加一个status属性值，方便操作
							})
							this.topicBoard=jsonmodel2.data.dataset;
							this.pagebean.next=jsonmodel2.data.next;
							this.pagebean.pre=jsonmodel2.data.pre;
							this.pagebean.pageno=jsonmodel2.data.pageno;
							this.pagebean.pagesize=jsonmodel2.data.pagesize;
							this.pagebean.total=jsonmodel2.data.total;
							this.pagebean.totalpages=jsonmodel2.data.totalpages;
							return;
						}
				})
			},
			showReplyDetail:function(topicid,title){
				axios.get("tbl_user.action?op=checkLogin").then(result=>{
					if(result.data.code==-1){
						alert("请登录");
						return;
					}else if(result.data.code==1){
						let data={topicid:topicid,title:title};
						sessionStorage.setItem("reply",JSON.stringify(data));
						window.location.href="detail.html";
					}else{
						alert("请求失败，原因:"+result.data.msg);
					}

				})
			}
		},
		created:function(){
			let Js=JSON.parse(sessionStorage.getItem("topicBoard"));
			this.boardid=Js.boardid;
			this.boardname=Js.boardname;

		},
		mounted:function(){
			axios.all([this.checkLogin(),this.showTopicBoard(1)]).then(axios.spread(function (d1) {
				let Json1=d1.data;
				if(Json1.code==1){
					vm.$data.uname=Json1.data.uname;
					vm.$data.islogin=true;
				}

			})  )

		}



	})

</script>






</HTML>
